<template>
  <div style="background-color: white;margin-left: 20px;">
    <!-- 查询框 -->
    <div class="search-wrapper">
      <el-collapse accordion v-model="activeName">
        <el-collapse-item title="查询条件" name="1">
          <el-form ref="form" :model="searchParams" label-width="80px" class="queryForm" :inline="true" size="mini">
            <el-form-item label="读取日期" prop="entryDateRange">
              <el-date-picker :clearable="true" v-model="searchParams.entryDateRange" type="daterange" align="right"
                :unlink-panels="true" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-button type="primary" size="mini" @click="searchFn()">查询日志</el-button>
            <el-button type="warning" @click="reset" size="mini" plain>重置</el-button>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 按钮组件 -->
    <div class="btns">
      <el-button type="primary" @click="readFileFn()" size="small">读取文件</el-button>
      <el-button size="small" @click="setInfoFn()">设置读取路径</el-button>
    </div>
    <el-table :header-cell-style="{ background: '#F0F1F3', }" :data="tableData" ref="singleTable" highlight-current-row
      header-align="center" align="center">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="导入时间" prop="importTime" show-overflow-tooltip />
      <el-table-column label="导入方式" prop="importMethod" show-overflow-tooltip />
      <el-table-column label="文件名" prop="fileName" show-overflow-tooltip />
      <el-table-column label="文件行数" prop="fileRows" show-overflow-tooltip />
      <el-table-column label="成功保存行数" prop="successRows" show-overflow-tooltip />
      <el-table-column label="错误行数" prop="errorRows" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.errorRows == '0'">{{ scope.row.errorRows }}</span>
          <div class="err-style" v-else>
            <span>{{ scope.row.errorRows }}</span>
            <el-popover trigger="hover" placement="top">
              <el-card>
                <el-button type="text" size="small" title="点击复制" icon="el-icon-document-copy"
                  @click="handleCopyLink(scope.row.errorMsg)"></el-button>
                异常信息：{{ scope.row.errorMsg }}
              </el-card>
              <span slot="reference" class="name-wrapper">
                <i class="el-icon-warning" v-if="scope.row.errorMsg != ''"></i>
              </span>
            </el-popover>

          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页页码 -->
    <div class="pageClass">
      <el-pagination :small="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="this.pageParams.pageIndex" :page-sizes="[25, 50, 75, 100]" :page-size="this.pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="this.pageParams.total"></el-pagination>
    </div>
    <set_file_server ref="setFileServer"></set_file_server>
  </div>
</template>
<script>
//导入模块
import SetFileServer from '../dialog/setFileServerDialog.vue'
import { fetchDocument, getDocFetchLog } from '../js/zsdz.js'
import baseSearch from '@/libs/baseSearch.js'
import moment from 'moment'
export default {
  name: 'readDocument',
  components: {
    'set_file_server': SetFileServer,
  },
  data() {
    return {
      activeName: '1',
      pickerOptions: baseSearch.pickerOptions,
      // 表格数据
      tableData: [],
      // 表格分页数据
      pageParams: {
        pageIndex: 1,
        pageSize: 25,
        total: 0,
      },
      searchParams: {
        entryDateRange: [
          moment(new Date()).format("YYYY-MM-DD"),
          moment(new Date()).format("YYYY-MM-DD"),
        ],
        startTime: '',
        endTime: '',
        orgnId: '',
        pageSize: 25,
        pageIndex: 1,
      },
    }
  },
  created() {
    this.searchFn()
  },
  //方法区
  methods: {
    /**
       * 查询功能
       */
    searchFn() {
      this.searchParams.pageIndex = 1
      var entryDate = this.searchParams.entryDateRange;
      if (entryDate != null && entryDate != "") {
        this.searchParams.startTime = entryDate[0];
        this.searchParams.endTime = entryDate[1];
      } else {
        this.searchParams.startTime = "";
        this.searchParams.endTime = "";
      }
      this.initTableData()
    },
    // 查询重置功能
    reset() {
      this.searchParams.entryDateRange = [
        moment(new Date()).format("YYYY-MM-DD"),
        moment(new Date()).format("YYYY-MM-DD"),
      ]
    },
    initTableData() {
      getDocFetchLog(this.searchParams).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.rows
          this.pageParams.total = Number(res.data.total)
          if (this.pageParams.total == 0) {
            this.$message({
              message: "暂无数据",
              type: 'success',
            })
          }
        } else if (res.code != 0) {
          this.$message({
            message: res.message,
            type: 'warning',
          })
        }
      })
    },
    //读取文件
    readFileFn() {
      fetchDocument().then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "文件读取中，请稍后查询读取日志",
            type: 'success',
          })
        } else if (res.code != 0) {
          this.$message({
            message: res.message,
            type: 'warning',
          })
        }
      })
    },
    //设置读取路径
    setInfoFn() {
      this.$refs.setFileServer.detailDialogVisible = true
    },
    ////分页
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.initTableData()
    },
    handleCurrentChange(val) {
      this.searchParams.pageIndex = val
      this.initTableData()
    },

    handleCopyLink(val) {
      let _this = this
      this.$copyText(val).then(
        function (e) {
          _this.$message({
            showClose: true,
            message: '复制成功',
            type: 'success',
          })
        },
        function (e) {
          _this.$message({
            showClose: true,
            message: '复制失败，请手动复制',
            type: 'error',
          })
        }
      )
    },
  },
}
</script>
<style scoped>
.search-wrapper {
  text-align: left;
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  margin-bottom: 25px;
}

.search-wrapper ::v-deep .el-collapse-item__content {
  padding-bottom: 0px !important;
}

.search-wrapper ::v-deep .el-collapse-item__header {
  padding-left: 15px !important;
}

.el-icon-warning {
  color: #f56c6c;
  font-size: 15px;
  margin-left: 12px;
}
</style>